<template>
	<view>
		<view class="item" style="padding-top: 20rpx;">
			<u-icon name="order" color="#1573FF" label="订单信息" labelColor="#333333"></u-icon>
			<u-line color="#efefef" margin="20rpx 0"></u-line>
			<view class="text-line">
				<text class="text-name">订单编号:</text>
				<text class="text-value">{{detail.orderInfo.orderNo|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">订单状态:</text>
				<text class="text-value">{{detail.orderInfo.orderStatus|shortOrderStatus}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">取车类型:</text>
				<text class="text-value">{{detail.orderInfo.rentalType|rentalType}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">取车门店:</text>
				<text class="text-value">{{detail.orderInfo.takeStoreName|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">还车门店:</text>
				<text class="text-value">{{detail.orderInfo.alsoStoreName|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">取车时间:</text>
				<text class="text-value">{{detail.orderInfo.rentalStartTime|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">还车时间:</text>
				<text class="text-value">{{detail.orderInfo.rentalEndTime|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">租期（天）:</text>
				<text class="text-value">{{detail.orderInfo.leaseDays|filterNull}}</text>
			</view>

		</view>
		<view class="item" style="padding-top: 20rpx;">
			<u-icon name="order" color="#1573FF" label="车辆信息" labelColor="#333333"></u-icon>
			<u-line color="#efefef" margin="20rpx 0"></u-line>
			<view class="text-line">
				<text class="text-name">分配车辆:</text>
				<text class="text-value">{{detail.carInfo.modelName}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">车牌号:</text>
				<text class="text-value">{{detail.carInfo.carNo|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">车架号:</text>
				<text class="text-value">{{detail.carInfo.vinNo|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">发动机号:</text>
				<text class="text-value">{{detail.carInfo.engineNo|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">能源形式:</text>
				<text class="text-value">{{detail.carInfo.styleModel|styleModel}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">燃油类型:</text>
				<text class="text-value">{{detail.carInfo.fuelType|fuelType}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">变速箱:</text>
				<text class="text-value">{{detail.carInfo.speedChangingBox|speedChangingBox}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">座位数:</text>
				<text class="text-value">{{detail.carInfo.seating|seat}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">排量:</text>
				<text class="text-value">{{detail.carInfo.displacement|displacement}}</text>
			</view>
		</view>
		<view class="item" style="padding-top: 20rpx;">
			<u-icon name="order" color="#1573FF" label="客户信息" labelColor="#333333"></u-icon>
			<u-line color="#efefef" margin="20rpx 0"></u-line>
			<view class="text-line">
				<text class="text-name">客户类型:</text>
				<text class="text-value">{{detail.customerInfo.memberType|customerType}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">客户名称:</text>
				<text class="text-value">{{detail.customerInfo.memberName|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">客户来源:</text>
				<text class="text-value">{{detail.customerInfo.memberSource|memberSource}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">联系方式:</text>
				<text class="text-value">{{detail.customerInfo.contactPhone |filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">联系地址:</text>
				<text class="text-value">{{detail.customerInfo.contactAddress|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">身份证号码:</text>
				<text class="text-value">{{detail.customerInfo.cardId|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">失效日期:</text>
				<text class="text-value">{{detail.customerInfo.cardValidity|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">身份证正反面:</text>
				<!-- <text class="text-value">{{detail.customerInfo.sfUrl|filterNull}}</text>
			</view> -->
			
			<text v-if="!detail.customerInfo.sfUrl" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.customerInfo.sfUrl">
				<u-album :urls="formatImage(detail.customerInfo.sfUrl)" multipleSize="100"></u-album>
			</view>
			<view class="text-line">
				<text class="text-name">驾驶证类型:</text>
				<text class="text-value">{{detail.customerInfo.drivingType|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">失效日期:</text>
				<text class="text-value">{{detail.customerInfo.drivingValidity|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">驾驶证正反面:</text>
			<!-- 	<text class="text-value">{{detail.customerInfo.jsUrl|filterNull}}</text>
			</view> -->
			
			<text v-if="!detail.customerInfo.jsUrl" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.customerInfo.jsUrl">
				<u-album :urls="formatImage(detail.customerInfo.jsUrl)" multipleSize="100"></u-album>
			</view>
			<view class="text-line"  v-if="detail.customerInfo.creditCode">
				<text class="text-name">统一社会信用代码:</text>
				<text class="text-value">{{detail.customerInfo.creditCode|filterNull}}</text>
			</view>
			<view class="text-line"  v-if="detail.customerInfo.businessLicenseUrl">
				<text class="text-name">营业执照:</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.customerInfo.businessLicenseUrl">
				<u-album :urls="formatImage(detail.customerInfo.businessLicenseUrl)" multipleSize="100"></u-album>
			</view>
		</view>
		<view class="item" style="padding-top: 20rpx;" v-if="detail.orderInfo.orderStatus>3&&detail.orderInfo.orderStatus<10">
			<u-icon name="order" color="#1573FF" label="交车验车单" labelColor="#333333"></u-icon>
			<u-line color="#efefef" margin="20rpx 0"></u-line>
			<view class="text-line">
				<text class="text-name">车身照片:</text>
				<!-- <text class="text-value">{{detail.carInspection.bodyImage}}</text>
			</view> -->
			<text v-if="!detail.carInspection.bodyImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.carInspection.bodyImage">
				<u-album :urls="formatImage(detail.carInspection.bodyImage)" multipleSize="100"></u-album>
			</view>
			<view class="text-line">
				<text class="text-name">仪表盘/油表:</text>
			<!-- 	<text class="text-value">{{detail.carInspection.panelImag}}</text>
			</view>
			 -->
			<text v-if="!detail.carInspection.panelImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.carInspection.panelImage">
				<u-album :urls="formatImage(detail.carInspection.panelImage)" multipleSize="100"></u-album>
			</view>
			<view class="text-line">
				<text class="text-name">内饰照片:</text>
				<!-- <text class="text-value">{{detail.carInspection.interiorImage}}</text>
			</view> -->
			<text v-if="!detail.carInspection.interiorImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.carInspection.interiorImage">
				<u-album :urls="formatImage(detail.carInspection.interiorImage)" multipleSize="100"></u-album>
			</view>
			<view class="text-line">
				<text class="text-name">车辆划痕:</text>
				<!-- <text class="text-value">{{ detail.carInspection.scratchImage}}</text>
			</view> -->
			
			<text v-if="!detail.carInspection.scratchImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.carInspection.scratchImage">
				<u-album :urls="formatImage(detail.carInspection.scratchImage)" multipleSize="100"></u-album>
			</view>
			<view class="text-line">
				<text class="text-name">车辆油量:</text>
				<text class="text-value">{{detail.carInspection.fuelCapacity}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">车辆公里数:</text>
				<text class="text-value">{{detail.carInspection.vehicleMileage}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">车辆随车物品:</text>
				<text class="text-value">{{detail.carInspection.accessoryItems}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">取车时间:</text>
				<text class="text-value">{{detail.carInspection.takeAlsoTime}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">处理人:</text>
				<text class="text-value">{{detail.carInspection.conductor}}</text>
			</view>
			
			<view class="text-line">
				<text class="text-name">其他描述:</text>
				<text class="text-value">{{detail.carInspection.remark}}</text>
			</view>
		</view>
		<view class="item" style="padding-top: 20rpx;"  v-if="detail.orderInfo.orderStatus>4&&detail.orderInfo.orderStatus<10">
			<u-icon name="order" color="#1573FF" label="还车验车单" labelColor="#333333"></u-icon>
			<u-line color="#efefef" margin="20rpx 0"></u-line>
			<view class="text-line">
				<text class="text-name">车身照片:</text>
				<!-- <text class="text-value">{{detail.alsoCarCheck.bodyImage}}</text>
			</view> -->
			<text v-if="!detail.alsoCarCheck.bodyImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.alsoCarCheck.bodyImage">
				<u-album :urls="formatImage(detail.alsoCarCheck.bodyImage)" multipleSize="100"></u-album>
			</view>
			<view class="text-line">
				<text class="text-name">仪表盘/油表:</text>
				<!-- <text class="text-value">{{detail.alsoCarCheck.panelImag}}</text>
			</view> -->
			<text v-if="!detail.alsoCarCheck.panelImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.alsoCarCheck.panelImage" >
				<u-album :urls="formatImage(detail.alsoCarCheck.panelImage)" multipleSize="100"></u-album>
			</view>
			<view class="text-line">
				<text class="text-name">内饰照片:</text>
				<!-- <text class="text-value">{{detail.alsoCarCheck.interiorImage}}</text>
			</view> -->
			
			<text v-if="!detail.alsoCarCheck.interiorImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.alsoCarCheck.interiorImage">
				<u-album :urls="formatImage(detail.alsoCarCheck.interiorImage)" multipleSize="100"></u-album>
			</view>
			<view class="text-line">
				<text class="text-name">车辆划痕:</text>
				<!-- <text class="text-value">{{ detail.alsoCarCheck.scratchImage}}</text>
			</view> -->
			
			<text v-if="!detail.alsoCarCheck.scratchImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.alsoCarCheck.scratchImage">
				<u-album :urls="formatImage(detail.alsoCarCheck.scratchImage)" multipleSize="100"></u-album>
			</view>
			<view class="text-line">
				<text class="text-name">车辆油量:</text>
				<text class="text-value">{{detail.alsoCarCheck.fuelCapacity}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">车辆公里数:</text>
				<text class="text-value">{{detail.alsoCarCheck.vehicleMileage}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">车辆随车物品:</text>
				<text class="text-value">{{detail.alsoCarCheck.accessoryItems}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">还车时间:</text>
				<text class="text-value">{{detail.alsoCarCheck.takeAlsoTime}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">处理人:</text>
				<text class="text-value">{{detail.alsoCarCheck.conductor}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">其他描述:</text>
				<text class="text-value">{{detail.alsoCarCheck.remark}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">客户签名:</text>
				<!-- <text class="text-value">{{detail.alsoCarCheck.signImage}}</text>
			</view> -->
			<text v-if="!detail.alsoCarCheck.signImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.alsoCarCheck.signImage">
				<u-album :urls="formatImage(detail.alsoCarCheck.signImage)" multipleSize="100"></u-album>
			</view>
		</view>
	</view>
</template>

<script>
import * as api from '@/api/order-api.js';
import settings from '@/settings.js'
export default {
    filters: {
        memberType(val) {
            return {
                1: '企业',
                2: '个人',
            }[Number(val)] || '';
        },
        memberSource(val) {
            return {
                1: '搜索',
                2: '分享',
                3: '扫码',
                4: '手动录入',
            }[Number(val)] || '';
        },
        imageUrl(url) {
            return process.env.VUE_APP_BASE_IMAGE_URL + url
        },
    },
    data() {
        return {
			order: {},
            detail: {
                "orderInfo": {//订单信息
                    "orderNo": '', //  "05055c045ad744799ee12ac0f3f41050",//订单编号
                    "orderStatus": '', //  11,//订单状态
                    "rentalType": '', //  null,//取车类型
                    "takeStoreName": '', //  "北广场自助点",//取车门店
                    "alsoStoreName": '', //  "北广场自助点",//还车门店
                    "actualStartTime": '', //  null,//实际取车时间
                    "actualEndTime": '', //  null,//实际还车时间
                    "leaseDays": '', //  2//租赁天数
                },
                "carInfo": {//车辆信息
                    "modelName": '', //  "风骏5",//预定品牌/车系/车型
                    "carNo": '', //  null,//车牌号
                    "vinNo": '', //  null,//车架号
                    "engineNo": '', //  null,//发动机号
                    "styleModel": '', //  null,//能源形式
                    "fuelType": '', //  null,//燃油类型
                    "speedChangingBox": '', //  null,//变速箱
                    "seating": '', //  null,//座位数
                    "displacement": '', //  null//排量
                },
                "customerInfo": {//客户信息
                    "memberNo": '', //  "M16462134546695155",//客户编号
                    "memberType": '', //  2,//客户类型
                    "memberName": '', //  "代元宝",//客户名称/企业名称
                    "memberSource": '', //  4,//客户来源
                    "contactPhone": '', //  "13892006829",//联系电话
                    "contactAddress": '', //  "陕西省西安市碑林区",//联系地址 /企业地址
                    "cardId": '', //  "610423198901224412",//身份证号
                    "cardValidity": '', //  "2026-01-01",//身份证有效期
                    "sfUrl": [], //身份证图片
                    "drivingId": '', // "610423198901224412",//驾驶证编号
                    "drivingType": '', // "c1",//驾驶证类型
                    "drivingValidity": '', // "2026-01-01",//驾驶证有效期
                    "jsUrl": [],//驾驶证图片
                    "businessLicenseUrl": null,//营业执照
                    "creditCode": null //统一社会信用代码
                },
                "carInspection": {//交车验车单
                    "id": '', //  "05055c045ad744799ee12ac0f3f41051",
                    "fuelCapacity": '', //  1.0,//车辆油量
                    "vehicleMileage": '', //  1.0,//公里数
                    "accessoryItems": '', //  null,//车辆随车物品(逗号隔开)
                    "remark": '', //  null,//其他描述
                    "takeAlsoTime": '', //  null,//取车时间
                    "conductor": '', //  "张三",//处理人
                    "bodyImage": [], //  null,//车身照片
                    "panelImage": [], //  null,//仪表盘
                    "interiorImage": [], //  null,//内饰照片
                    "scratchImage": [], //  null,//车辆划痕
                    "signImage": [], //  null//客户签名
                },
                "alsoCarCheck": {//还车验车单
                    "id": '', //  "05055c045ad744799ee12ac0f3f41051",
                    "fuelCapacity": '', //  1.0,//车辆油量
                    "vehicleMileage": '', //  1.0,//公里数
                    "accessoryItems": '', //  null,//车辆随车物品(逗号隔开)
                    "remark": '', //  null,//其他描述
                    "takeAlsoTime": '', //  null,//还车时间
                    "conductor": '', //  "张三",//处理人
                    "lkosten": '', //  null,//补充油费(还车验车)
                    "bodyImage": [], //  null,//车身照片
                    "panelImage": [], //  null,//仪表盘
                    "interiorImage": [], //  null,//内饰照片
                    "scratchImage": [], //  null,//车辆划痕
                    "signImage": [], //  null//客户签名
                }
            },
        }
    },
    methods: {
        getData() {
            api.detail(this.order.orderNo).then(response => {
                this.detail.orderInfo = response.data.orderInfo || {};
                this.detail.customerInfo = response.data.customerInfo || {};
                this.detail.carInfo = response.data.carInfo || {};
                this.detail.alsoCarCheck = response.data.alsoCarCheck || {};
                this.detail.carInspection = response.data.carInspection || {};
                this.detail.alsoCarCheck = response.data.alsoCarCheck || {};
            });
        },
		formatImage(images){
			let arr=[];
			for (let url of images) {
				arr.push(settings.baseImageUrl + url);
			}
			return arr;
		}
    },
	onLoad: function(option) {
		const item = JSON.parse(decodeURIComponent(option.item));
		this.order = item;
		this.getData();
	},
}
</script>

<style lang="scss" scoped>
	.layout {
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;

		.layout-circle {
			width: 85rpx;
			height: 85rpx;
			background-image: linear-gradient(135deg, #F3F8FE, #A2C7FF);
			border-radius: 50%;
			display: inline-flex;
			align-items: center;
			justify-content: center;

			text {
				color: $blue15;
			}
		}

		text {
			font-size: 26rpx;
			color: $black33;
			margin-top: 8rpx;

		}
	}
</style>
